<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>问答管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card" style="height: 800px">
      <!-- 选项卡 -->
      <el-tabs v-model="activeName">
        <!--搜索区-->
        <el-form
          :inline="true"
          :model="queryData"
          class="demo-form-inline"
          label-width="100px"
        >
          <el-form-item>
            <el-input
              v-model="queryData.keyWords"
              placeholder="请输入关键词搜索"
            />
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="queryData.askAnswerAsk"
              placeholder="请输入问题搜索"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="queryByConditions"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
        <div class="interspaceH"></div>
        <el-row>
          <el-col :span="5">
            <el-card class="box-card" style="width: 250px; height: 700px">
              <el-row style="height: 50px">
                <div style="display: flex; justify-content: space-between">
                  <!-- <span>问答分组</span> -->
                  <el-button
                    size="small"
                    icon="el-icon-plus"
                    type="primary"
                    @click="openAddGrop"
                    >添加分组
                  </el-button>
                </div>
              </el-row>
              <!--          <el-link @click="show">+ 添加分组</el-link>-->
              <!--<el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick">
                                </el-tree>-->
              <el-tree
                :data="data"
                :props="defaultProps"
                accordion
                @node-click="handleNodeClick"
              >
                <span
                  class="custom-tree-node"
                  slot-scope="{ node, data }"
                  @mouseover="data.show = true"
                  @mouseleave="data.show = false"
                >
                  <span>{{ node.label }}</span>
                  <span>
                    <el-button
                      v-if="data.show"
                      type="text"
                      size="mini"
                      @click="() => removeGroup(node, data)"
                    >
                      删除
                    </el-button>
                  </span>
                </span>
              </el-tree>
            </el-card>
          </el-col>
          <el-col :span="19">
            <el-card class="box-card" style="width: 920px; height: 700px">
              <div v-show="showData">
                <el-row>
                  <el-col :span="20"><span>问答列表</span></el-col>
                  <el-col :span="2">
                    <el-button type="primary" size="small" @click="tianjia"
                      >添加问答</el-button
                    >
                    <!--<el-button type="primary" size="small">导入问答</el-button>
                                            <el-button type="primary" size="small">导出</el-button>-->
                  </el-col>
                </el-row>
                <el-table
                  size="small"
                  :data="listData"
                  highlight-current-row
                  v-loading="loading"
                  element-loading-text="拼命加载中"
                  style="width: 100%"
                >
                  <el-table-column align="center" type="selection" width="">
                  </el-table-column>
                  <el-table-column prop="askAnswerAsk" label="问题" width="">
                  </el-table-column>
                  <el-table-column prop="keyWords" label="关键词" width="">
                    <!--<template slot-scope="scope">
                                                <el-tag v-for="item in scope.row.keyWords" :key="item"
                                                        style="margin-right: 10px">{{ item }}
                                                </el-tag>
                                            </template>-->
                  </el-table-column>
                  <el-table-column prop="askAnswerAnswer" label="答案" width="">
                  </el-table-column>
                  <el-table-column label="操作" min-width="">
                    <template slot-scope="scope">
                      <el-button
                        type="text"
                        size="mini"
                        @click="xiangqing(scope.$index, scope.row)"
                        >详情</el-button
                      >
                      <el-button
                        type="text"
                        size="mini"
                        @click="bianji(scope.$index, scope.row)"
                        >编辑</el-button
                      >
                      <el-button
                        type="text"
                        size="mini"
                        @click="shanchu(scope.$index, scope.row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  @size-change="
                    queryDataHandle(pagePagination.currentPage, $event)
                  "
                  @current-change="
                    queryDataHandle($event, pagePagination.pageSize)
                  "
                  :current-page="pagePagination.currentPage"
                  :page-sizes="pagePagination.pageSizes"
                  :page-size="pagePagination.pageSize"
                  layout="total, sizes, prev, pager, next"
                  :total="pagePagination.total"
                >
                </el-pagination>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 添加分组 -->
        <el-dialog
          :title="title"
          :visible.sync="formVisible"
          width="30%"
          @click="close"
        >
          <el-form
            size="small"
            :inline="true"
            :model="createGroup"
            class="demo-form-inline"
            label-width="100px"
          >
            <el-row>
              <el-form-item label="分组名称">
                <el-input
                  v-model="createGroup.askAnswerGroupName"
                  placeholder="请输入分组名称"
                />
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="使用权限">
                <el-radio-group v-model="createGroup.groupRank">
                  <el-radio label="1">全部</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-form-item>
              <el-button size="mini" @click="close()">取消</el-button>
              <el-button size="mini" type="primary" @click="queding"
                >确定</el-button
              >
            </el-form-item>
          </el-form>
        </el-dialog>
        <!--添加问答-->
        <el-dialog
          :title="wordsTitle"
          :visible.sync="wordsFormVisible"
          width="40%"
          @click="handleClosr"
          :close-on-click-modal="false"
        >
          <el-form ref="form" :model="createData" label-width="80px">
            <el-form-item label="问题">
              <el-input v-model="createData.askAnswerAsk"></el-input>
            </el-form-item>
            <el-form-item label="关键词">
              <el-input v-model="createData.keyWords"></el-input>
            </el-form-item>
            <el-form-item label="答案">
              <!--<el-radio-group v-model="createData.ask_answer_appendices">
                                    <el-radio label="文本"></el-radio>
                                </el-radio-group>-->
              <el-input
                type="textarea"
                v-model="createData.askAnswerAnswer"
              ></el-input>
            </el-form-item>
            <!--<el-form-item>
                                <el-input type="textarea" v-model="createData.askAnswerAnswer"></el-input>
                            </el-form-item>-->
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="close">取消</el-button>
            <el-button size="mini" type="primary" @click="add">确定</el-button>
          </div>
        </el-dialog>
        <!--详情-->
        <el-dialog
          :title="view"
          :visible.sync="views"
          width="40%"
          @click="handleClosr"
          :close-on-click-modal="false"
        >
          <el-form ref="form" :model="detailsData" label-width="80px" disabled>
            <el-form-item label="问题">
              <el-input v-model="detailsData.askAnswerAsk"></el-input>
            </el-form-item>
            <el-form-item label="关键词">
              <el-input v-model="detailsData.keyWords"></el-input>
            </el-form-item>
            <el-form-item label="答案">
              <el-input
                type="textarea"
                v-model="detailsData.askAnswerAnswer"
              ></el-input>
            </el-form-item>
            <el-form-item label="审核状态">
              <el-input v-model="detailsData.askAnswerStatus"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="mini" @click="close">返回</el-button>
          </div>
        </el-dialog>
        <!--编辑-->
        <el-dialog
          :title="updates"
          :visible.sync="update"
          width="40%"
          :close-on-click-modal="false"
        >
          <el-form ref="form" :model="updateData" label-width="80px">
            <el-form-item label="问题">
              <el-input v-model="updateData.askAnswerAsk"></el-input>
            </el-form-item>
            <el-form-item label="关键词">
              <el-input v-model="updateData.keyWords"></el-input>
            </el-form-item>
            <el-form-item label="答案">
              <!--<el-radio-group v-model="createData.ask_answer_appendices">
                                    <el-radio label="文本"></el-radio>
                                </el-radio-group>-->
              <el-input
                type="textarea"
                v-model="updateData.askAnswerAnswer"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-input
                v-model="updateData.askAnswerStatus"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" @click="close">取消</el-button>
            <el-button size="small" type="primary" class="title" @click="edit"
              >保存
            </el-button>
          </div>
        </el-dialog>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showData: false,

      view: "详情",
      views: false,
      updates: "编辑",
      update: false,
      gjctj: false,
      gjcbj: false,
      gjcxq: false,

      // 选项卡
      activeName: "first",

      title: "添加分组",
      wordsTitle: "新建素材",

      // 添加分组的数据
      addGroup: "",

      // 添加分组显示
      formVisible: false,
      // 新建素材显示
      wordsFormVisible: false,

      // 新建素材添加表单
      wordsForm: {
        ask: "",
        keyWords: "",
        appendiceType: "",
        appendiceMessage: "",
      },
      // 连接追踪选项
      checked: "",

      // 筛选
      formInline: {
        page: 1,
        limit: 10,
        varLable: "",
        varName: "",
        token: localStorage.getItem("logintoken"),
      },

      // 分页参数
      pagePagination: {
        currentPage: 1,
        pageSizes: [10, 15, 20, 25],
        pageSize: 10,
        total: 0,
      },

      data: [],
      defaultProps: {
        label: "askAnswerGroupName",
      },

      // 问答列表
      listData: [],
      //创建分组
      createGroup: {
        askAnswerGroupName: "",
        groupRank: "1",
      },
      //当前分组
      currentGroup: "",
      //创建数据
      createData: {},
      //详情数据
      detailsData: {},
      //修改数据
      updateData: {},
      queryData: {
        askAnswerAsk: "",
        keyWords: "",
      },
      // 显示加载
      loading: false,
    };
  },

  mounted() {
    this.queryGroup();
  },
  methods: {
    removeGroup(node, data) {
      let that = this;
      that.isDelete = true;
      this.$confirm("此操作将永久删除该分组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let askAnswerGroupId = data.askAnswerGroupId;
          var params = {
            askAnswerGroupId: askAnswerGroupId,
            pageNum: this.pagePagination.currentPage,
            pageSize: this.pagePagination.pageSize,
          };
          // console.log(askAnswerGroupId)
          this.$request("/askAnswer/getById", params, "POST").then((data) => {
            if (data.data.data != null && data.data.data.length !== 0) {
              that.$message.error("请先将该分组中数据清空后再删除！");
            } else {
              that
                .$request(
                  "/askAnswerGroup/delete/" + askAnswerGroupId,
                  "",
                  "POST"
                )
                .then((data) => {
                  that.$message.success("删除成功！");
                  that.showData = false;
                  that.queryGroup();
                });
            }
          });
        })
        .catch(() => {});
    },
    //条件查询
    queryByConditions() {
     
      this.queryData["pageNum"] = 1;
      this.queryData["pageSize"] = this.pagePagination.pageSize;
      this.$request(
        "/askAnswer/getByExample",
        this.queryData,
        "POST"
      ).then((data) => {
        this.pagePagination.total = data.data.total;
        this.listData = data.data.data;
      });
    },
    //查询分组数据
    queryGroup() {
      this.$request("/askAnswerGroup/selectAll", {}, "POST").then((data) => {
        data.data.forEach((item) => {
          item["show"] = false;
        });
        this.data = data.data;
      });
    },
    handleNodeClick(data) {
      this.currentGroup = data.askAnswerGroupId;
      // console.log(this.currentGroup)
      this.showData = true;
      this.listData = [];
      var params = {
        askAnswerGroupId: this.currentGroup,
        pageNum: this.pagePagination.currentPage,
        pageSize: this.pagePagination.pageSize,
      };
      this.$request("/askAnswer/getById", params, "POST").then((data) => {
        this.pagePagination.total = data.data.total;
        this.listData = data.data.data;
      });
      this.createData = {};
      this.updateData = {};
    },

    openAddGrop() {
      this.createGroup.askAnswerGroupName = "";
      this.formVisible = true;
    },
    // 新建话术关闭
    handleClosr() {
      this.wordsFormVisible = false;
    },

    queding() {
      if (
        this.createGroup.askAnswerGroupName == null ||
        this.createGroup.askAnswerGroupName == undefined ||
        this.createGroup.askAnswerGroupName == ""
      ) {
        this.$message({
          message: "请输入名称",
          type: "error",
        });
        return;
      }
      this.$request("/askAnswerGroup/add", this.createGroup, "POST").then(
        (data) => {
          this.$message({
            message: "添加分组成功",
            type: "success",
          });
          this.queryGroup();
        }
      );
      this.close();
    },
    add() {
      if (
        this.createData.askAnswerAsk == null ||
        this.createData.askAnswerAsk == undefined ||
        this.createData.askAnswerAsk == ""
      ) {
        this.$message({
          message: "请输入问题",
          type: "error",
        });
        return;
      } else if (
        this.createData.askAnswerAnswer == null ||
        this.createData.askAnswerAnswer == undefined ||
        this.createData.askAnswerAnswer == ""
      ) {
        this.$message({
          message: "请输入答案",
          type: "error",
        });
        return;
      }
      this.createData.groupId = this.currentGroup;
      this.$request("/askAnswer/add", this.createData, "POST").then((data) => {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.handleNodeClick(this.createData);
        this.close();
      });
    },
    edit() {
      // this.updateData.groupId = this.currentGroup
      this.$request("/askAnswer/update", this.updateData, "POST").then(
        (data) => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.handleNodeClick(this.updateData);
        }
      );
      this.close();
    },
    tianjia() {
      this.wordsFormVisible = true;
    },
    xiangqing(index, row) {
      this.views = true;
      this.detailsData = row;
    },
    bianji(index, row) {
      this.update = true;
      this.updateData = row;
    },
    shanchu(index, row) {
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$request(
            "/askAnswer/delete/" + row.askAnswerId,
            "",
            "POST"
          ).then((data) => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.handleNodeClick(row);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 分页插件事件
    queryDataHandle(page = 1, row = 10) {
      let that = this;
      let payload = {
        pageNum: page,
        pageSize: row,
      };
      that
        .$request("/api/askAnswer/byAskAnswer/1_0", payload, "POST")
        .then((data) => {
          that.pagePagination["total"] = data.total;
          that.pagePagination["pageSize"] = row;
        });
    },

    // 添加分组显示
    show() {
      this.formVisible = true;
    },
    // 添加分组关闭
    close() {
      this.formVisible = false;
      this.wordsFormVisible = false;
      this.views = false;
      this.update = false;
      this.gjctj = false;
      this.gjcbj = false;
      this.gjcxq = false;
    },

    // 新建素材显示
    handleEdit() {
      this.wordsFormVisible = true;
    },
    // 新建素材显示
    wordsClose() {
      this.wordsFormVisible = false;
    },
  },
};
</script>

<style scoped>
.el-link {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 700;
  color: #222;
}

.el-dialog .el-row {
  margin-top: 20px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
